<template>
	<view class="case" ref="case">
		<!-- 基本信息 -->
		<view class="case_info">
			<view class="info_top">
				<text>患者基本信息</text>
				<text @click="edit">编辑</text>
			</view>

			<view class="info_item">
				<text>姓名</text>
				<text>{{healthDetail.name}}</text>
			</view>
			<view class="info_item">
				<text>性别</text>
				<text>{{healthDetail.sex | sex}}</text>
			</view>
			<view class="info_item">
				<text>出生日期</text>
				<text>{{healthDetail.birthday}}</text>
			</view>
			<view class="info_item">
				<text>疾病类型</text>
				<text>{{healthDetail.type | type}}</text>
			</view>
			<view class="info_item">
				<text>确诊日期</text>
				<text>{{healthDetail.confirm_date}}</text>
			</view>
			<view class="info_item">
				<text>并发疾病</text>
				<view style="width: 460rpx; overflow: hidden;white-space: nowrap;text-overflow: ellipsis; line-height: 80rpx;">
					<text v-if="otherList.length > 0" style="width: auto" v-for="item in otherList" :key="item" v-show="item != null">{{item}},</text>
				</view>
			</view>
			<view class="info_item">
				<text>家族史</text>
				<text>{{healthDetail.family | family}}</text>
			</view>

		</view>

		<!-- 身高体重 -->
		<view class="case_info">
			<view class="info_top">
				<text>身高体重</text>
				<text @click="goToincHeight">添加</text>
			</view>

			<view class="info_item">
				<text>身高</text>
				<text>{{heightWight.height}}</text>
			</view>
			<view class="info_item">
				<text>体重</text>
				<text>{{heightWight.wight}}</text>
			</view>
			<view class="info_item">
				<text>BMI</text>
				<text>{{heightWight.BMI}}</text>
			</view>
		</view>
		<!-- 血糖变化 -->
		<view class="case_info">
			<view class="info_top">
				<text>血尿酸变化情况</text>
				<text @click="goToRecordns">添加记录</text>
			</view>
			<view class="info_tb">
				<view class="qiun-columns">
					<view class="qiun-charts">
						<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
					</view>
				</view>
			</view>
		</view>

		<!-- 药品服用情况 -->
		<view class="case_info">
			<view class="info_top">
				<text>药品服用情况</text>
				<text @click="goToMdication">添加计划</text>
			</view>
			<view class="medicine_list">
				<view class="medicine_list_top">
					<text>服用时期</text>
					<text>药品</text>
					<text>计量</text>
					<text>方案</text>
				</view>
				<scroll-view scroll-y style="max-height: 600rpx;">
					<view class="medicine_list_con" v-for="(item,index) in mdicationList" :key="index">
						<view class="medi_con_item">
							<text>{{item.start_time}}</text>
							<text style="display: block;">至</text>
							<text>{{item.until_date}}</text>
						</view>
						<view class="medi_con_item">{{item.drug_name}}</view>
						<view class="medi_con_item">{{item.drug_num}}片</view>
						<view class="medi_con_item"><text>{{item.result1}}</text> <br><text>{{item.result2}}</text></view>
					</view>
				</scroll-view>

			</view>
		</view>
		<!-- 生成报告 -->
		<view class="case_btn" @click="caseBtn">
			生成报告
		</view>
	</view>
</template>

<script>
	import uCharts from '../compon/u-charts/u-charts.js';
	// import html2canvas from 'html2canvas';
	// import jspdf from 'jspdf';
	import {
		yearTime
	} from '../compon/method/method.js'


	let _self;
	let canvaLineA = null;
	export default {
		data() {
			return {
				currentNav: 0,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,

				chartData: {
					categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
					"series": [{
						"name": "曲面",
						"data": [],
						"type": "area",
						"style": "curve"
					} ]
				},
				// 新数据
				newChartData: {},
				// 当前年份
				year: '',
				// 用户基本信息
				healthDetail: {},
				// 身高体重
				heightWight: {},
				// 并发疾病类型
				otherList: [],
				// 今日服药数量
				mdicationList: [],
				// 图表最大值
				maxNum: null,
				// html结构
				htmlStructure: null
			};
		},
		onShow() {
			_self = this;
			this.year = yearTime('year').split('-')[0]
			this.getServerData();
			this.getHealthDetail()
			this.getHeightWight()
			this.drugToday()
			this.getGlucoseList(this.year)
			this.getHtml()
		},
		// mounted() { 
		// 	this.year = yearTime('year').split('-')[0]  
		// },
		methods: {
			getServerData(chartData) {
				if (chartData) {
					_self.showLineA("canvasLineA", chartData)
				} else {
					_self.showLineA("canvasLineA", _self.chartData)
				}
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'mix',
					fontSize: 11,
					// 下方图例
					legend: {
						show: false
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					width: 360,
					height: 150,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						disableGrid: false
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						// splitNumber: 6,
						min: 0,
						max: _self.maxNum,
						disableGrid: false
					},
					extra: {
						// line: {
						// 	type: 'straight'
						// }
					}
				});

			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function(item, category) { 
						return category + ' ' + item.name + ':' + item.data.value
					}
				});
			},
			// 获取用户基本信息
			getHealthDetail() {
				let _this = this
				_this.$api.sendRequest({
					url: '/api/health/detail',
					success: res => {
						_this.otherList = []
						_this.healthDetail = res
						_this.filterOther(res.sickness_other)
						res.other_name && _this.otherList.push(res.other_name)
					}
				})
			},
			// 获取身高体重
			getHeightWight() {
				this.$api.sendRequest({
					url: '/api/health/heightWight',
					success: res => {
						if (res.code >= 0) {
							this.heightWight = res.data
						}
					}
				})
			},
			// 编辑
			edit() {
				uni.navigateTo({
					url: '../archives/infodata/index?healthDetail=' + JSON.stringify(this.healthDetail)
				})
			},
			// 新增身高体重
			goToincHeight() {
				uni.navigateTo({
					url: '../archives/increaseHeight/index'
				})
			},
			// 前往服药页面
			goToMdication() {
				uni.navigateTo({
					url: '../mdication/index'
				})
			},
			// 病例生成
			drugToday() {
				this.$api.sendRequest({
					url: '/api/report/index',
					success: res => {
						this.mdicationList = res.drug 
						// if(res.code >= 0){  
						// 	this.mdicationList = res
						// 	console.log(this.mdicationList)
						// 	   }
					}
				})
			},
			// 格式化并发疾病数据
			filterOther(type) {
				let _this = this
				// let num = type? type.split(',') : null 
				if (type) {
					let num = type.split(',')
					num && num.map(item => {
						switch (item) {
							case '0':
								_this.otherList[0] = '无并发疾病';
								break;
							case '1':
								_this.otherList[1] = '高血压';
								break;
							case '2':
								_this.otherList[2] = '高血脂';
								break;
							case '3':
								_this.otherList[3] = '糖尿病';
								break;
							case '4':
								_this.otherList[4] = '心血管疾病';
								break;
							case '5':
								_this.otherList[5] = '肾脏功能受损';
								break;
							case '6':
								_this.otherList[6] = '肾结石';
								break;
							case '7':
								_this.otherList[7] = '痛风石';
								break;
						}
					})
				} else {
					return '无数据'
				}
			},
			// 获取html结构
			getHtml() {
				this.$api.sendRequest({
					url: '/api/report/getHtml',
					data: {},
					success: res => {
						if (res.code >= 0) {
							this.htmlStructure = res.data
						}
					}
				})
			},
			// 前往添加尿酸页面
			goToRecordns() {
				uni.navigateTo({
					url: '../recordns/index'
				})
			},
			// 获取列表
			getGlucoseList(year) {
				this.$api.sendRequest({
					url: 'api/ua/uaList',
					data: {
						year
					},
					success: res => {
						if (res.code >= 0) {
							if (res.data) {
								let newData = []
								let newDatas = []
								for (let key in res.data) {
									newDatas.push(parseInt(res.data[key]))
									newData.push({
										value: parseInt(res.data[key]),
										time: key
									})
								}
								this.maxNum = Math.max(...newDatas) + 100
								this.newChartData = {
									categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
									"series": [{
										"name": "曲面",
										"data": newData,
										"type": "area",
										"style": "curve",
										"color": "#02cf98"
									} ]
								}
								this.getServerData(this.newChartData);
							}
						}
					}
				})
			},
			caseBtn() { 
				let that = this;  
				uni.showLoading({
					title:'下载中'
				})
				 that.$api.sendRequest({
					 url: 'api/report/build?token=fdafasf',
					 success: res => {
						 if(res.code >= 0){ 
								uni.downloadFile({
									url: res.data,
									// filePath: wx.env.USER_DATA_PATH + "/" + "文件" + ".pdf",
									filePath: wx.env.USER_DATA_PATH + `/ ${that.healthDetail.name} ${yearTime()}.pdf`,
									success: res => { 
										if(res.statusCode == 200){
											uni.hideLoading()    
											uni.openDocument({
												filePath: res.filePath,
												fileType:'pdf',
												showMenu: true,
												success: r => {
													console.log(r)
												},
												fail: openError=> {
													console.log(openError)
												}
											})
										}
										 
									},
									fail:err => {
										uni.showToast({
											icon: 'none',
											title: '下载失败'
										})
									}
								})
						 }
					 }
				 })
			},
			// 解决toJSON bug
			toJSON() {
				return this
			}
		},
		filters: {
			family(type) {
				switch (type) {
					case 1:
						return '有家人痛风';
						break;
					case 2:
						return '没有家人痛风';
						break;
					case 3:
						return '不清楚';
						break
				}
			},
			sex(type) {
				switch (type) {
					case 1:
						return '男';
						break;
					case 2:
						return '女';
						break
				}
			},
			type(type) {
				switch (type) {
					case 1:
						return '痛风';
						break;
					case 2:
						return '高尿酸血症';
						break;
				}
			},
			other(type) {

				// switch(type){
				// 	case 1:
				// 	return '无并发疾病';
				// 	break;
				// 	case 2:
				// 	return '高血压';
				// 	break;
				// 	case 3:
				// 	return '高血脂';
				// 	break;
				// 	case 4:
				// 	return '糖尿病';
				// 	break;
				// 	case 5:
				// 	return '心血管疾病';
				// 	break;
				// 	case 6:
				// 	return '肾脏功能受损';
				// 	break;
				// 	case 7:
				// 	return '肾结石';
				// 	break;
				// 	case 8:
				// 	return '痛风石';
				// 	break;  
				// }
			}
		}
	}
</script>

<style lang="less">
	.case {
		.case_info {
			margin: 20rpx 0;
			padding: 20rpx;
			// height: 600rpx;
			background-color: #fff;

			.info_top {
				display: flex;
				justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;

				& text:first-child {
					position: relative;
					left: 20rpx;

					&::before {
						position: absolute;
						content: '';
						left: -20rpx;
						top: 50%;
						transform: translate(0, -50%);
						width: 6rpx;
						height: 40rpx;
						background-color: #01cb9b;
					}
				}

				& text:last-child {
					margin: auto 0;
					padding: 0 40rpx;
					height: 50rpx;
					line-height: 50rpx;
					color: #04c99b;
					border-radius: 30rpx;
				}
			}

			.medicine_list {
				text-align: center;

				.medicine_list_top {
					display: flex;
					height: 80rpx;
					line-height: 80rpx;
					border: 2rpx solid #e5e5e5;
					border-left: none;
					border-right: none;

					text {
						flex: 1;
					}
				}

				.medicine_list_con {
					margin-top: 10rpx;
					display: flex;
					min-height: 80rpx;

					.medi_con_item {
						flex: 1;
					}
				}
			}

			.info_item {
				display: flex;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1rpx solid #eee;

				text {
					width: 200rpx;
				}

				input {
					width: 400rpx;
				}
			}

			.info_tb {
				height: 300rpx;
			}


		}

		.case_btn {
			margin: 20rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			border-radius: 20rpx;
			background-color: #04c99b;
		}

		.qiun-columns .qiun-charts {
			height: 300rpx;

			.charts {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
